<template>
  <div>
    <el-card class="box-card">
      <div style="margin-top:10px;margin-bottom: 20px" class="wrap">
        <el-card class="box-card">
          <el-form :inline="true" :model="queryParams" class="demo-form-inline" size="small">
            <el-form-item label="房间类型">
              <el-select v-model="queryParams.roomType" placeholder="房间类型" clearable>
                <el-option v-for="(item,index) in typeList" :label="item.roomTypeName" :value="item.roomTypeName"
                           :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getList">查询</el-button>
              <el-button type="primary" @click="reset1">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item,index) in roomList" :key="item.id">
            <div class="grid-content" style="margin-bottom: 15px" @click="order(item)">
              <div class="top">
                <a class="me-article-title">
                  <img :src="item.roomPhoto" class="newsImg">
                </a>
              </div>
              <div class="bootom" style="line-height: 40px">
                <a class="me-article-title">
                  <el-row :gutter="20">
                    <el-col :span="12"><span style="font-weight: bold;font-size: 18px;color: #E65D6E">
                {{item.roomName}}
              </span></el-col>
                    <el-col :span="12" style="text-align: right">
                      <span style="font-weight: bold;font-size: 18px;color: #ba1554;">
                {{item.roomPrice}}元
              </span>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24" style="margin-top: -20px;text-align: right">
                      <span style="font-size: 13px;color: #8c939d">
                        {{item.roomType}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.peopleNumber}}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.roomArea}}
                      </span>
                    </el-col>
                  </el-row>
                </a>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>


    <el-dialog
      title="预定客房"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <div class="o_wrap">
        <div class="w_left">
          <img :src="roominfo.roomPhoto" class="newsImg">
          <div>
            <el-row :gutter="20" class="rowClass">
              <el-col :span="8" class="name">
                <div>客房价格</div>
              </el-col>
              <el-col :span="16">
                <div class="value">{{roominfo.roomPrice}}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="rowClass">
              <el-col :span="8" class="name">
                <div>客房类型</div>
              </el-col>
              <el-col :span="16">
                <div class="value">{{roominfo.roomType}}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="rowClass">
              <el-col :span="8" class="name">
                <div>客房名称</div>
              </el-col>
              <el-col :span="16">
                <div class="value">{{roominfo.roomName}}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="rowClass">
              <el-col :span="8" class="name">
                <div>可住人数</div>
              </el-col>
              <el-col :span="16">
                <div class="value">{{roominfo.peopleNumber}}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="rowClass">
              <el-col :span="8" class="name">
                <div>客房面积</div>
              </el-col>
              <el-col :span="16">
                <div class="value">{{roominfo.roomArea}}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="rowClass">
              <el-col :span="8" class="name">
                <div>客房特色</div>
              </el-col>
              <el-col :span="16">
                <div class="value">{{roominfo.roomFeature}}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="rowClass">
              <el-col :span="8" class="name">
                <div>客房床型</div>
              </el-col>
              <el-col :span="16">
                <div class="value">{{roominfo.bedType}}</div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="W_right">
          <el-form ref="form" :model="form"  label-width="150px">

            <el-form-item label="订单拥有者姓名" prop="orderOwnerName">
              <el-input v-model="form.orderOwnerName" placeholder="请输入订单拥有者姓名"/>
            </el-form-item>
            <el-form-item label="订单拥有者手机号" prop="orderOwnerPhone">
              <el-input v-model="form.orderOwnerPhone" placeholder="请输入订单拥有者手机号"/>
            </el-form-item>
            <el-form-item label="房型名称" prop="roomTypeName">
              <el-input v-model="form.roomTypeName" placeholder="请输入房型名称"/>
            </el-form-item>
            <el-form-item label="房间名" prop="roomName">
              <el-input v-model="form.roomName" placeholder="请输入房间名"/>
            </el-form-item>
            <el-form-item label="是否含早餐" prop="haveBreakfastName">
              <el-switch
                v-model="form.haveBreakfastName"
                active-value=1
                inactive-value=0
                active-text="含早餐"
                inactive-text="不含早餐">
              </el-switch>
            </el-form-item>
            <el-form-item label="房间单价" prop="roomPrice">
              <el-input v-model="form.roomPrice" placeholder="请输入房间单价"/>
            </el-form-item>
            <el-form-item label="预订天数" prop="orderRoomAmount">
              <el-input-number v-model="form.orderRoomAmount" placeholder="请输入预订天数" :min="1" :max="10"
                               @change="computeTotal"></el-input-number>
            </el-form-item>
            <el-form-item label="入住时间段" prop="checkInPeriod">
              <el-date-picker
                v-model="form.checkInPeriod"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <div style="padding-left: 150px;">
              <span style="color: brown;font-size: 10px" v-if="this.isMember==='1'">您是会员用户，享受9折优惠</span>
            </div>
            <el-form-item label="总金额" prop="totalMoney">
              <el-input v-model="form.totalMoney" placeholder="总金额"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { listRoom, getRoom } from '@/api/hotel/room'
  import { listName } from '@/api/hotel/type'
  import { addOrder, updateOrder } from '@/api/hotel/order'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        // 表单参数
        form: {},
        roomList: [],
        queryParams: {
          roomStatus: '1',
          roomType: null
        },
        queryParam: {},
        typeList: [],
        dialogVisible: false,
        roominfo: {},
        photo: ''
      }
    },
    created() {
      this.getList ()
      this.getTypeName ()
    },
    computed: {
      ... mapGetters ([
        'phonenumber','userName','nickName','isMember'
      ])
    },
    methods: {
      handleClose(done) {
        this.$confirm ('确认关闭？')
          .then (_ => {
            done ()
          })
          .catch (_ => {
          })
      },

      reset1() {
        this.queryParams.roomType = null
        this.getList ()
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          orderNumber: null,
          orderName: null,
          orderOwnerName: null,
          orderOwnerPhone: null,
          roomTypeName: null,
          bedType: null,
          haveBreakfastName: null,
          roomPrice: null,
          orderRoomAmount: null,
          expectArriveTime: null,
          checkInPeriod: null,
          createTime: null,
          payStatus: '0',
          roomName: null,
          checkInStatus: '0'
        }
        this.resetForm ('form')
      },
      /** 查询客房信息列表 */
      getList() {
        this.loading = true
        listRoom (this.queryParams).then (response => {
          this.roomList = response.rows
          this.roomList.forEach (item => {
            item.roomPhoto = process.env.VUE_APP_BASE_API + item.roomPhoto
          })
          this.loading = false
        })
      },
      getTypeName() {
        listName (this.queryParam).then (response => {
          this.typeList = response.list
        })
      },

      order(item) {
        this.roominfo = item
        this.form.roomName = this.roominfo.roomName
        this.form.orderOwnerPhone = this.phonenumber
        this.form.orderOwnerName = this.nickName
        this.form.haveBreakfastName = this.roominfo.haveBreakfast
        this.form.roomPrice = this.roominfo.roomPrice
        this.form.roomTypeName = this.roominfo.roomType
        this.dialogVisible = true

      },
      /** 提交按钮 */
      submitForm() {
        this.form.checkInStatus = "1"
        this.form.payStatus = '1'
        this.form.checkInPeriod = this.form.checkInPeriod.join ('到')
        console.log (this.form.checkInPeriod)
        this.$refs[ 'form' ].validate (valid => {
          if ( valid ) {
            if ( this.form.id != null ) {
              updateOrder (this.form).then (response => {
                this.$modal.msgSuccess ('修改成功')
                this.open = false
                this.getList ()
              })
            } else {
              addOrder (this.form).then (response => {
                this.$modal.msgSuccess ('新增成功')
                this.open = false
                this.getList ()
              })
              this.dialogVisible = false
            }
          }
        })
      },
      computeTotal(currentValue, oldValue) {
        if(this.isMember==='1'){
          this.form.totalMoney = this.form.roomPrice * currentValue*0.9
        }else{
          this.form.totalMoney = this.form.roomPrice * currentValue
        }
      }
    }
  }
</script>

<style scoped>


  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }


  .grid-content {
    border-radius: 4px;
    min-height: 220px;
    border: 1px #8c939d solid;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .top {
    height: 150px;
  }

  .bootom {
    padding: 10px;
    height: 50px;
  }

  .top, .bootom {
    border-radius: 4px;
  }

  .newsImg {
    height: 100%;
    width: 100%;
    border-radius: 5px 5px 0 0;
  }

  /*.wrap{
    width: 1100px;
    clear: both;
  }*/
  .left {
    width: 50%;
    float: left;
  }

  .right {
    width: 50%;
    float: right;
    text-align: right;
  }

  .o_wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }

  .w_left {
    width: 30%;
    height: 100%;
  }

  .W_right {
    width: 65%;
    height: 100%;
  }

  .name {
    font-size: 18px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    color: #8c939d;
  }

  .value {
    font-size: 18px;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    color: #1e1e1e;
  }

  .rowClass {
    margin-top: 15px;
  }
</style>
